import React, { useContext, useEffect, useState } from "react";
import DesignerToolbar from "./Toolbar";
import { LowCodeDesignerContext } from "./Provider";

const renderActionBar = (dom, config, index) => {
  // console.log('domdom',dom)
  const { currentDesigner,setCurrentDesigner } = useContext(LowCodeDesignerContext);
  const checked = currentDesigner?._id==config._id
  // useEffect(()=>{
  //   if(checked){

  //     setCurrentDesigner(config)
  //   }
  // },[checked])
// console.log('currentDesigner',currentDesigner)
//  const [count,setCount] = useState(0)
  return (
    <div
    className="design-toolbar"
     style={{
      border:checked?'1px solid  blue':'1px dashed #ccc',
      
     }}
     onClick={(e)=>{
      setCurrentDesigner(config)
      e.stopPropagation()
    }} >
      {/* {config.type} */}
      {/* {index} */}
      {dom}
      {/* {count} */}
      {/* {
        // currentDesigner.
      } */}
      {checked?<DesignerToolbar />:null}
    </div>
  );
};
export default renderActionBar;
